<template>
    <div class="livingview">
        <div class="live" v-for="(item, index) in selectNum" :key="index">
            <div class="boxs">
                <el-select v-model="item.droneSelected" class="m-2 box" placeholder="设备" size="large">
                    <el-option v-for="(i,n) in droneList" @click="onDroneSelect(n,i)"  :key="i.value" :label="i.label" :value="i.value" />
                </el-select>
                <el-select v-model="item.cameraSelected" class="m-2 box" placeholder="镜头" size="large">
                    <el-option v-for="(i,n) in cameraList" @click="onCameraSelect(n,i)" :key="i.value" :label="i.label" :value="i.value" />
                </el-select>
                <el-select v-model="item.clarityList" class="m-2 box" placeholder="清晰度" size="large">
                    <el-option v-for="(i,n) in clarityList" @select="onClaritySelect(n,i)" :key="i.value" :label="i.label" :value="i.value" />
                </el-select>

            </div>
            <div style="display: flex;flex-wrap: nowrap;flex-direction: column;align-items: flex-end;">
              <el-button class="button" v-if="item.go" type="danger" @click="changeGo(item, index)" round >结束</el-button>
              <el-button class="button" v-else @click="changeStop(item, index)" type="success" round>开始</el-button>
              <el-button class="button" @click="onUpdateQuality" type="warning" plain>刷新</el-button>
              <!-- <el-button class="button" @click="onRefresh" type="warning" >刷新</el-button> -->

            </div>

        </div>
        
    </div>
    <div class="livingbox">
        <Livingview ref="child1" :indexNum =1 ></Livingview>
        <Livingview ref="child0" :indexNum =0 ></Livingview>
        <Livingview ref="child3" :indexNum =3 ></Livingview>
        <Livingview ref="child2" :indexNum =2 ></Livingview>
    </div> :srca=""
</template>
<script setup lang='ts'>
import { onMounted, ref, provide } from 'vue'
import { ElMessage } from 'element-plus'
import { changeLivestreamLens, getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '@/api/manage'

import Livingview from '@/components/Living/LivingStream.vue'
let srcaok = ref('')
const srcaono = ref('')
const value = ref('')
const livestreamSource = ref()
const droneList = ref()

const videowebrtc = ref(null)
const cameraList = ref()
const videoList = ref()
const droneSelected = ref()
const cameraSelected = ref()
const videoSelected = ref()
const claritySelected = ref()
const videoId = ref()
const liveState = ref<boolean>(false)
const livetypeSelected = ref()
const rtspData = ref()
const lensList = ref<string[]>([])
const lensSelected = ref<String>()
const isDockLive = ref(false)
const nonSwitchable = 'normal'
const child0 = ref(null)
const child1 = ref(null)
const child2 = ref(null)
const child3 = ref(null)

//直播选择数据接口
interface SelectData{
  droneSelected: any, //设备
  cameraSelected:any, // 镜头
  clarityList:any, // 清晰度
  go:boolean

}
var selectNum = ref<SelectData[]>([]) 
provide("videoData",selectNum);
provide("srcaok",srcaok);
const changeGo = (e:any,n:number)=>{
  e.go = false
  srcaok.value = ''
  // let childRef = 'child' + n
  // eval(childRef ).value.onStop();
}
const changeStop = (e:any,n:number)=>{
  e.go = true
  // let childRef = 'child' + n
  // eval(childRef ).value.onStart();

}
// 清晰接口
interface SelectOption {
    value: any,
    label: string,
    more?: any
  }
const clarityList: SelectOption[] = [
    {
      value: 0,
      label: '自动'
    },
    {
      value: 1,
      label: '流畅'
    },
    {
      value: 2,
      label: '清晰'
    },
    {
      value: 3,
      label: '高清'
    },
    {
      value: 4,
      label: '超清'
    }
  ]
// 飞机选择
const onDroneSelect = (val: SelectOption) => {
  droneSelected.value = val.value
  const temp: Array<SelectOption> = []
  cameraList.value = []
  cameraSelected.value = undefined
  videoSelected.value = undefined
  videoList.value = []
  lensList.value = []
  if (!val.more) {
    return
  }
  val.more.forEach((ele: any) => {
    temp.push({ label: ele.name, value: ele.index, more: ele.videos_list })
  })
  cameraList.value = temp
}
// 镜头选择

const onCameraSelect = (n:number,val: SelectOption) => {
  selectNum.value[n].cameraList = val.value
  const result: Array<SelectOption> = []
  if (!val.more) {
    return
  }
  val.more.forEach((ele: any) => {
    result.push({ label: ele.type, value: ele.index, more: ele.switch_video_types })
  })
  videoList.value = result
  if (videoList.value.length === 0) {
    return
  }
  const firstVideo: SelectOption = videoList.value[0]
  videoSelected.value = firstVideo.value
  lensList.value = firstVideo.more
  lensSelected.value = firstVideo.label
  isDockLive.value = lensList.value?.length > 0
}
//清晰度选择
const onClaritySelect = (val: any) => {
  claritySelected.value = val
}

// const onSwitch = () => {
//   if (lensSelected.value === undefined || lensSelected.value === nonSwitchable) {
//     ElMessage.info('The ' + nonSwitchable + ' lens cannot be switched, please select the lens to be switched.', 8)
//     return
//   }
//   changeLivestreamLens({
//     video_id: videoId.value,
//     video_type: lensSelected.value
//   }).then(res => {
//     if (res.code === 0) {
//       ElMessage.success('Switching live camera successfully.')
//     }
//   })
// }


const onUpdateQuality = () => {
  if (!liveState.value) {
    ElMessage.info('Please turn on the livestream first.')
    return
  }
  setLivestreamQuality({
    video_id: videoId.value,
    video_quality: claritySelected.value
  }).then(res => {
    if (res.code === 0) {
      ElMessage.success('Set the clarity to ' + clarityList[claritySelected.value].label)
    }
  })
}
// 初始化
const onRefresh = async () => {
    droneList.value = []
    cameraList.value = []
    videoList.value = []
    for(let i = 0; i < 4; i++) {
      selectNum.value[i] = {
        droneSelected: null, //设备
        cameraSelected:null, // 镜头
        clarityList:null, // 清晰度
        go:false
      }
    }
    await getLiveCapacity({})
      .then(res => {
        console.log(res)
        if (res.code === 0) {
          if (res.data === null) {
            console.warn('warning: 直播获取失败')
            return
          }
          const resData: Array<[]> = res.data
          console.log('live_capacity:', resData)
          livestreamSource.value = resData
  
          const temp: Array<SelectOption> = []
          if (livestreamSource.value) {
            livestreamSource.value.forEach((ele: any) => {
              temp.push({ label: ele.name + '-' + ele.sn, value: ele.sn, more: ele.cameras_list })
            })
            droneList.value = temp
          }
        }
      })
      .catch(error => {
        ElMessage.error(error)
        console.error(error)
      })
  }
onMounted(() => {
    onRefresh()

})
</script>

<style scoped lang='scss'>
 .livingbox {
     position: absolute;
     display: flex;
     flex-wrap: wrap;
     height: 100%;
     width: 100%;
     flex-direction: row-reverse;
     align-content: space-around;

 }

 .livingview {
     position: absolute;
     z-index: 99;
     height: 100%;
     width: 250px;
     background-color: rgb(255, 255, 255);
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;

     .live {
         height: 25%;
         display: flex;
         justify-content: center;
         align-items: center;
         border-bottom: 1px rgb(188, 188, 188) solid;
        .button{
          margin-bottom: 5px;
        }
         .boxs {
             height: 60%;
             width: 60%;
             display: flex;
             flex-direction: column;
             align-items: center;
             flex-wrap: nowrap;
             justify-content: center;
             background-color: rgb(251, 251, 251);
             border-radius: 15px;

             .box {
                 height: 40px !important;
                 width: 70% !important;
                 
             }
         }
     }
 }
</style >
